<template>
  <div class="card content-box">
    <TitleBar :title="title" />
    <div class="main">
      <el-menu
        class="elMenu"
        :router="false"
        :unique-opened="true"
        :collapse-transition="false"
        background-color="#f5f5f5"
        v-if="menuList && menuList.length > 0"
      >
        <SubMenuTree :menuList="menuList" />
      </el-menu>
      <div class="side">
        <div class="form" v-if="isShow">
          <div class="formTitle">
            <div class="formTitle__con" v-show="formTitle">
              <img class="formTitleIcon" src="@/assets/images/titleIcon.png" alt="" /><span>{{ formTitle }}</span>
            </div>
          </div>
          <el-form label-width="100px" :model="formData" style="max-width: 460px">
            <el-form-item label="父级菜单：">
              <el-tree-select
                v-model="formData.parentMenuName"
                :disabled="isDisabled"
                :data="parentMenuSelectTree"
                check-strictly
                :render-after-expand="false"
              />
            </el-form-item>
            <el-form-item label="菜单名称：">
              <el-input v-model="formData.curMenuName" />
            </el-form-item>
            <el-form-item label="菜单顺序：">
              <el-input v-model="formData.order" />
            </el-form-item>
          </el-form>
        </div>
        <HandlerBar :handlerBtns="handlerBtns" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Menu">
import { ref, reactive, provide, nextTick, onMounted } from "vue";
import { useRoute } from "vue-router";
import { routerMap } from "@/utils/routerData";
import { Delete } from "@element-plus/icons-vue";
import { MatchParentMenuItem, GetParentMenuSelectTree, SelectItem } from "../interfaces";
import TitleBar from "@/components/TitleBar/index.vue";
import SubMenuTree from "@/components/SubMenuTree/index.vue";
import HandlerBar from "@/components/HandlerBar/index.vue";
const route = useRoute();
const title: any = ref(route.meta.title);
const menuList = ref(JSON.parse(JSON.stringify(routerMap.get(+route.path.slice(-1)))));
const formTitle = ref("");
let parentMenuSelectTree: any = ref([]);
const formData = ref({ parentMenuName: "", curMenuName: "", order: "" });
const isDisabled = ref(false);
const isShow = ref(false);

/**
 * 菜单重置
 */
const _resetMenuList = (): void => {
  menuList.value = [];
  formTitle.value = "";
  isShow.value = false;
  nextTick(() => {
    menuList.value = JSON.parse(JSON.stringify(routerMap.get(1)));
    isDisabled.value = false;
  });
};

const _addMenu = (): void => {
  isDisabled.value = false;
  formTitle.value = "";
  formData.value = { parentMenuName: "", curMenuName: "", order: "" };
  isShow.value = true;
};

/**
 * 底部操作栏按钮组
 */
const handlerBtns = reactive([
  {
    name: "删除",
    type: "danger",
    icon: Delete,
    plain: true,
    class: "delete",
    func: _resetMenuList
  },
  {
    name: "新增",
    type: "primary",
    icon: "CirclePlus",
    plain: false,
    class: "add",
    func: _addMenu
  },
  {
    name: "保存",
    type: "primary",
    icon: "Document",
    plain: false,
    class: "save"
  }
]);
/**
 * 获取父级selectTree
 */
const getParentMenuSelectTree: GetParentMenuSelectTree = (menuList: Menu.MenuOptions[]): SelectItem[] => {
  const parentMenuSelectTree = menuList.map(item => {
    let selectItem: SelectItem = {
      value: item.meta.title,
      label: item.meta.title
    };
    if (item.children) {
      if (item.children[0].children) {
        selectItem.children = getParentMenuSelectTree(item.children);
        return selectItem;
      }
    }
    return selectItem;
  });
  return parentMenuSelectTree as SelectItem[];
};

/**
 * 匹配父级菜单
 */
const matchParentMenuItem: MatchParentMenuItem = (menuList: any[], menuItem?: Menu.MenuOptions): void => {
  menuList.forEach(item => {
    if (item.children) {
      matchParentMenuItem(item.children, item);
    } else {
      if (item.meta.title === formTitle.value) {
        formData.value.parentMenuName = menuItem ? menuItem.meta.title : item.meta.title;
      }
    }
  });
};
/**
 * SubmenuTree 菜单选中回调
 */
provide("menuItemChange", (opts: Menu.MenuOptions): void => {
  formTitle.value = opts.meta.title;
  isShow.value = true;
  isDisabled.value = true;
  formData.value.curMenuName = formTitle.value;
  menuList.value && matchParentMenuItem(menuList.value);
});
onMounted(() => {
  parentMenuSelectTree.value = getParentMenuSelectTree(menuList.value ?? []);
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
